<template>
	<view class="container">
		<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text"
			activeColor="#a0cad9">
		</uni-segmented-control>
		<view class="content">
			<view v-if="current === 0">
				<uni-list>
					<uni-list-item v-for="(item, index) in terminalList" :title="item.title" note="" :rightText="item.time"
						:show-extra-icon="true"
						:extra-icon="{color: '#c1d9c6',size: '22',type: 'chatboxes'}"
						to="">
						<template v-slot:footer style="margin: 0;">
							<view style="align-items: center;">
								<button @click.stop="toggle($refs.popup1,item,'bottom')" style="border-style: none;"
									plain="true">
									<uni-icons type="more-filled" size="25" color="#b1b1b1"></uni-icons>
								</button>
							</view>
						</template>
					</uni-list-item>
				</uni-list>
			</view>
			<view v-show=" current===1">
				<uni-list>
					<uni-list-item v-for="(item, index) in tagList" :title="item.title" note="" :rightText="item.time"
						:show-extra-icon="true"
						:extra-icon="{color: '#c1d9c6',size: '22',type: 'paperclip'}"
						to="">
						<template v-slot:footer style="margin: 0;">
							<view style="align-items: center;">
								<button @click.stop="toggle($refs.popup1,item,'bottom')" style="border-style: none;"
									plain="true">
									<uni-icons type="more-filled" size="25" color="#b1b1b1"></uni-icons>
								</button>
							</view>
						</template>
					</uni-list-item>
				</uni-list>
			</view>
			
			<uni-popup ref="popup1" background-color="#fff" @change="change" style="bor">
				<view>
					<uni-list>
						<uni-list-item :clickable="true" class="menu-item" @click="toAdd">
							<template v-slot:body>
								<view class="menu-item-box">
									编辑
								</view>
							</template>
						</uni-list-item>
						<uni-list-item :clickable="true" class="menu-item">
							<template v-slot:body>
								<view style="color: #FF5A5F;" class="menu-item-box">
									删除
								</view>
							</template>
						</uni-list-item>
						<uni-list-item :clickable="true" class="menu-item"@click="closepopup">
							<template v-slot:body>
								<view class="menu-item-box" >
									返回
								</view>
							</template>
						</uni-list-item>
					</uni-list>
				</view>
			</uni-popup>
			
			<view>
				<FabBtn btnValue="新增" :callback="fabClick"></FabBtn>
			</view>
		</view>
	</view>
</template>

<script>
	import FabBtn from "@/components/FabBtn.vue"
	import request from "@/common/request.js"
	export default {
		components: {
			FabBtn
		},
		data() {
			return {
				current: 0,
				items: ["终端分组", "nfc标签分组"],
				pagesize: 6,
				terminalList: [{						
						title: "开睿动力测试nfc打卡",
					},
					{						
						title: "测试",
					},
					{						
						title: "测试群组",
					}
				],
				tagList: [{						
						title: "tag1",
					},
					{						
						title: "tag2",
					},
					{						
						title: "tag3",
					}
				]
			}
		},
		methods: {
			onClickItem(e) {
				this.current = e.currentIndex
				// console.log(e)
			},
			/* 展开编辑弹窗*/
			toggle(e, item, type) {
				this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				e.open(type)
			},
			/* 弹窗状态变化触发 */
			change(e) {
				console.log('当前模式：' + e.type + ',状态：' + e.show);
			},
			/* 关闭弹窗 */
			closepopup() {
				this.$refs.popup1.close()
			},
			/* 点击悬浮按钮新增 */
			fabClick() {
				console.log("you clicked add..")
				/*
				!!! just a test
				*/
				let Param = {
					pageNum : 1,
					pageSize: 1,
					type : 1
				};
				
				let opts = {
					url: '//business/group/list',
					method: 'get'
				};
				
				// std_request.tokenRequest(opts, Param)
				console.log(request.std_tokenRequest(opts, Param))
				// this.init_data(1,1)
				
				
				
				uni.navigateTo({
					url: "./create_terminal"
				})
			},
			searchBarSearch(e) {
				console.log(e)
			},
			searchBarInput(e) {
				console.log(e)
			},

			/* 载入终端群组表单数据 参数为页码，群组类型（0 终端群组  1 nfc群组）*/
			init_data(page,type) {
				let Param = {
					pageNum : page,
					pageSize: this.pagesize,
					type : type
				};
				
				let opts = {
					url: '//business/group/list',
					method: 'get'
				};
				
				console.log("加载群组信息");
				
				uni.showLoading({
					title : '加载中'
				});
				
				request.httpTokenRequest(opts,Param).then(res => {
								uni.hideLoading();
								if (res.code == 200) {
									console.log(res);
									if(type == 0){
										this.terminalList = res.data.data;
									}else{
										this.tagList = res.data.data;
									}
								} else {
									console.log("请求失败");
								}
							});
			},
			
			//按照ID搜索
			SearchById(groupId){
				let opts = {
					url: '/business/group/' + groupId,
					method: 'get'
				};
				
				console.log("搜索群组信息");
				
				uni.showLoading({
					title : '搜索中'
				});
				
				request.httpTokenRequest(opts,Param).then(res => {
								uni.hideLoading();
								if (res.code == 200) {
									console.log(res);
									if(res.data.data.type == 0){
										this.terminalList = res.data.data;
									}else{
										this.tagList = res.data.data;
									}
								} else {
									console.log("请求失败");
								}
							});
			}
		}
	}
</script>

<style>
	.container {
		/* padding: 20px; */
		font-size: 14px;
		line-height: 24px;
	}
	
	.fab-button {
		position: fixed;
		bottom: 80px;
		right: 25px;
		width: 65px;
		height: 65px;
		line-height: 65px;
		border-radius: 50%;
		box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.2), 0 10px 28px 0 rgba(0, 0, 0, 0.19);
		font-size: 5px;
	}

	.menu-item {
		width: 100%;
	}

	.menu-item-box {
		width: 100%;
		text-align: center;
		align-items: center;
	}
</style>
